/**
 * @name Header
 * @description 全局头部
 * @author darcrand
 */

import React, { useCallback } from 'react'
import { NavLink } from 'react-router-dom'
import { observer } from 'mobx-react'
import { Button, Avatar, Badge } from 'antd'
import { BellFilled } from '@ant-design/icons'
import { useStore } from '@/store'

import { Logo } from '@/components'
import styles from './styles.module.less'

const Header = observer(() => {
  const { user } = useStore()
  const onGotoCreateArticle = useCallback(() => {
    window.open('/article-edit/new')
  }, [])

  return (
    <header className={styles.container}>
      <div className={styles.content}>
        <Logo />
        <nav className={styles.nav}>
          <NavLink to='/home'>首页</NavLink>
          <NavLink to='/about'>我的</NavLink>
        </nav>

        {user.isLogin ? (
          <>
            <Button type='primary' onClick={onGotoCreateArticle}>
              写文章
            </Button>
            <Badge dot className={styles.dot_wrapper}>
              <BellFilled className={styles.bell} />
            </Badge>
            <Avatar />
          </>
        ) : (
          <Button type='primary' ghost onClick={user.login}>
            登录
          </Button>
        )}
      </div>
    </header>
  )
})

export default React.memo(Header)
